Skip to main content

Vanilla JS

Embed TFTPDF in a Vanilla JS application​

This guide shows you how to integrate the TFTPDF API into your web application using the tftpdfapiclient.js file provided.

The installation is broken down into 3 steps:

Import the script​

To import TFTPDF, you can import it in an HTML <script> tag:

<script src="https://tftlabs.com/apiclientpdf-dev/v1/tftapiclient.js"></script>

Instantiate the script​

Instantiate TFTPDF :

tftpdfWrapper.js
let tftpdfWrapper = new TFTPDFWrapper();

const injectScript = (url) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url; //source

    script.onload = (ret) => resolve(ret);
    script.onerror = () => reject(new Error("Unable to load pdfViewer script"));

    document.head.appendChild(script); // inject where you need it to be
  });
};

const initWrapper = async (element, width = 800, height = 600, lang = "fr") => {
  tftpdfWrapper._viewer = element;

  await injectScript("https://tftlabs.com/apiclientpdf/v1/tftapiclient.js");

  const login = await tftpdfWrapper.login(
    process.env.TFTAPI_LOGIN,
    process.env.TFTAPI_PASSWORD
  );

  const credentials = login.data;

  const api = window.TFTAPIClient;
  const itWidget = new api.TFT4itWidget(element, {});
  const widget = new api.TFTPdfWidget(
    element,
    {
      active: 1,
      w: width,
      h: height,
      lang,
    },
    function (widgetEvent) {

      // Add custom EventHandler here!

    }
  );